<template>
  <div class="counter-warp">
    <map
      id="mapp"
      v-if="showMap"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :polyline="polylines"
      enable-poi
      :show-compass="showCompass"
      :show-scale="showScale"
      :include-points="markers"
      show-location
      @markertap="selectMarket"
    >
      <cover-view slot="callout">
        <cover-view marker-id="0"></cover-view>
        <cover-view marker-id="10"></cover-view>
      </cover-view>
    </map>
    <div>Vuex counter：{{ count }}</div>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</template>

<script>
// import QQMapWX from '@/../static/qqmap/qqmap-wx-jssdk.js'
// var QQMapWX = require('@/../static/qqmap/qqmap-wx-jssdk.js')
export default {
  data () {
    return {
      qqmapsdk: null,
      count: 0,
      latitude: 30.681774,
      longitude: 104.012757,
      scale: 16,
      showCompass: true,
      showScale: true,
      showMap: false,
      points: [
        { latitude: 30.680717, longitude: 104.014907 },
        { latitude: 30.665232, longitude: 104.008153 },
        { latitude: 30.662298, longitude: 104.021628 },
        { latitude: 30.660812, longitude: 104.037609 },
        { latitude: 30.658006, longitude: 104.044615 },
        { latitude: 30.662731, longitude: 104.047265 },
        { latitude: 30.660313, longitude: 104.055998 },
        { latitude: 30.657485, longitude: 104.059217 },
        { latitude: 30.656391, longitude: 104.060676 },
        { latitude: 30.656386, longitude: 104.06427 },
        { latitude: 30.658311, longitude: 104.06427 },
        { latitude: 30.658311, longitude: 104.06427 },
        { latitude: 30.658385, longitude: 104.067467 },
        { latitude: 30.65664, longitude: 104.067521 },
        { latitude: 30.656317, longitude: 104.066137 },
        { latitude: 30.652468, longitude: 104.066148 },
        { latitude: 30.647484, longitude: 104.066255 },
        { latitude: 30.647152, longitude: 104.067843 },
        { latitude: 30.64634, longitude: 104.075031 },
        { latitude: 30.644401, longitude: 104.080911 },
        { latitude: 30.643746, longitude: 104.080567 },
        { latitude: 30.642417, longitude: 104.082885 },
        { latitude: 30.642038, longitude: 104.083614 },
        { latitude: 30.640967, longitude: 104.087037 },
        { latitude: 30.639777, longitude: 104.088689 },
        { latitude: 30.638826, longitude: 104.08958 },
        { latitude: 30.632909, longitude: 104.092444 },
        { latitude: 30.627231, longitude: 104.089826 },
        { latitude: 30.620741, longitude: 104.083732 },
        { latitude: 30.620584, longitude: 104.079194 },
        { latitude: 30.620556, longitude: 104.07693 },
        { latitude: 30.616456, longitude: 104.077027 },
        { latitude: 30.616263, longitude: 104.071941 },
        { latitude: 30.608608, longitude: 104.072242 },
        { latitude: 30.608423, longitude: 104.070879 },
        { latitude: 30.598247, longitude: 104.071062 },
        { latitude: 30.598071, longitude: 104.067768 },
        { latitude: 30.58879, longitude: 104.068047 },
        { latitude: 30.562834, longitude: 104.068809 },
        { latitude: 30.543293, longitude: 104.069152 },
        { latitude: 30.521197, longitude: 104.069806 },
        { latitude: 30.497765, longitude: 104.07045 },
        { latitude: 30.491423, longitude: 104.070632 },
        { latitude: 30.491414, longitude: 104.071008 },
        { latitude: 30.510337, longitude: 104.070445 },
        { latitude: 30.532869, longitude: 104.069731 },
        { latitude: 30.555725, longitude: 104.069077 },
        { latitude: 30.560404, longitude: 104.069071 },
        { latitude: 30.560247, longitude: 104.058825 },
        { latitude: 30.561476, longitude: 104.058809 },
        { latitude: 30.562132, longitude: 104.059056 },
        { latitude: 30.563166, longitude: 104.058155 },
        { latitude: 30.564617, longitude: 104.058316 },
        { latitude: 30.564654, longitude: 104.06132 },
        { latitude: 30.564118, longitude: 104.062307 },
        { latitude: 30.56433, longitude: 104.06368 },
        { latitude: 30.564811, longitude: 104.068766 },
        { latitude: 30.563795, longitude: 104.072832 },
        { latitude: 30.564995, longitude: 104.076716 },
        { latitude: 30.561919, longitude: 104.076458 },
        { latitude: 30.560617, longitude: 104.074312 },
        { latitude: 30.558316, longitude: 104.074506 }
      ],
      pointdata: [],
      temps: [
        {
          from: '30.680657,104.014998',
          waypoints: '30.665043,104.008496', // ;30.670073,104.021827;30.667253,104.038092
          to: '30.662215,104.021253'
        },
        {
          // type: 'walking',
          from: '30.662196,104.022009',
          waypoints: '30.662579,104.033548', // ;30.670073,104.021827;30.667253,104.038092
          to: '30.661033,104.037035'
        },
        {
          from: '30.660595,104.037727', // 五公里
          waypoints: '30.658071,104.044363;30.658297,104.044894;30.662565,104.047185',
          to: '30.660078,104.056358'
        },
        {
          from: '30.657637,104.059056', // 7.5公里
          waypoints: '30.656437,104.060596;30.656317,104.062741',
          to: '30.656336,104.064227'
        }
        // {
        //   from: '30.646977,104.067564', // 10公里
        //   // waypoints: '',
        //   to: '30.620819,104.083722'
        // },
        // {
        //   from: '30.620579,104.080079', // 15公里
        //   waypoints: '30.598348,104.068218',
        //   to: '30.592456,104.067510'
        // },
        // {
        //   from: '30.588831,104.067827', // 20公里
        //   // waypoints: '',
        //   to: '30.560681,104.068594'
        // },
        // {
        //   from: '30.543311,104.069114', // 25公里
        //   // waypoints: '',
        //   to: '30.558316,104.074506'
        // },
        // {
        //   from: '30.497469,104.070472', // 30公里···
        //   // waypoints: '',
        //   to: '30.491539,104.070649'
        // },
        // {
        //   from: '30.491331,104.070659', // 折返点
        //   waypoints: '30.492426,104.070938',
        //   to: '30.515878,104.070214'
        // },
        // {
        //   from: '30.532999,104.069715', // 35公里
        //   waypoints: '30.551193,104.069184;30.560316,104.069114;30.560404,104.065086;30.560381,104.058836',
        //   to: '30.560242,104.058890'
        // },
        // {
        //   from: '30.560487,104.058799', // 步行
        //   // waypoints: '',
        //   // type: 'warking',
        //   to: '30.558316,104.074506'
        // },
        // {
        //   from: '30.564353,104.064045', // 40公里
        //   // waypoints: '',
        //   to: '30.558316,104.074506'
        // },
        // {
        //   from: '30.562861,104.077204', // 步行结束
        //   // waypoints: '',
        //   to: '30.562233,104.076844'
        // },
        // {
        //   from: '30.562178,104.076844',
        //   waypoints: '30.560690,104.074243',
        //   to: '30.558866,104.074554'
        // }
      ],
      polyline: [
        {
          points: [
            { latitude: 30.680717, longitude: 104.014907 },
            { latitude: 30.665232, longitude: 104.008153 },
            { latitude: 30.662298, longitude: 104.021628 },
            { latitude: 30.660812, longitude: 104.037609 },
            { latitude: 30.658006, longitude: 104.044615 },
            { latitude: 30.662731, longitude: 104.047265 },
            { latitude: 30.660313, longitude: 104.055998 },
            { latitude: 30.657485, longitude: 104.059217 },
            { latitude: 30.656391, longitude: 104.060676 },
            { latitude: 30.656386, longitude: 104.06427 },
            { latitude: 30.658311, longitude: 104.06427 },
            { latitude: 30.658311, longitude: 104.06427 },
            { latitude: 30.658385, longitude: 104.067467 },
            { latitude: 30.65664, longitude: 104.067521 },
            { latitude: 30.656317, longitude: 104.066137 },
            { latitude: 30.652468, longitude: 104.066148 },
            { latitude: 30.647484, longitude: 104.066255 },
            { latitude: 30.647152, longitude: 104.067843 },
            { latitude: 30.64634, longitude: 104.075031 },
            { latitude: 30.644401, longitude: 104.080911 },
            { latitude: 30.643746, longitude: 104.080567 },
            { latitude: 30.642417, longitude: 104.082885 },
            { latitude: 30.642038, longitude: 104.083614 },
            { latitude: 30.640967, longitude: 104.087037 },
            { latitude: 30.639777, longitude: 104.088689 },
            { latitude: 30.638826, longitude: 104.08958 },
            { latitude: 30.632909, longitude: 104.092444 },
            { latitude: 30.627231, longitude: 104.089826 },
            { latitude: 30.620741, longitude: 104.083732 },
            { latitude: 30.620584, longitude: 104.079194 },
            { latitude: 30.620556, longitude: 104.07693 },
            { latitude: 30.616456, longitude: 104.077027 },
            { latitude: 30.616263, longitude: 104.071941 },
            { latitude: 30.608608, longitude: 104.072242 },
            { latitude: 30.608423, longitude: 104.070879 },
            { latitude: 30.598247, longitude: 104.071062 },
            { latitude: 30.598071, longitude: 104.067768 },
            { latitude: 30.58879, longitude: 104.068047 },
            { latitude: 30.562834, longitude: 104.068809 },
            { latitude: 30.543293, longitude: 104.069152 },
            { latitude: 30.521197, longitude: 104.069806 },
            { latitude: 30.497765, longitude: 104.07045 },
            { latitude: 30.491423, longitude: 104.070632 },
            { latitude: 30.491414, longitude: 104.071008 },
            { latitude: 30.510337, longitude: 104.070445 },
            { latitude: 30.532869, longitude: 104.069731 },
            { latitude: 30.555725, longitude: 104.069077 },
            { latitude: 30.560404, longitude: 104.069071 },
            { latitude: 30.560247, longitude: 104.058825 },
            { latitude: 30.561476, longitude: 104.058809 },
            { latitude: 30.562132, longitude: 104.059056 },
            { latitude: 30.563166, longitude: 104.058155 },
            { latitude: 30.564617, longitude: 104.058316 },
            { latitude: 30.564654, longitude: 104.06132 },
            { latitude: 30.564118, longitude: 104.062307 },
            { latitude: 30.56433, longitude: 104.06368 },
            { latitude: 30.564811, longitude: 104.068766 },
            { latitude: 30.563795, longitude: 104.072832 },
            { latitude: 30.564995, longitude: 104.076716 },
            { latitude: 30.561919, longitude: 104.076458 },
            { latitude: 30.560617, longitude: 104.074312 },
            { latitude: 30.558316, longitude: 104.074506 }
          ],
          borderColor: '#000000',
          color: '#33c9FF',
          width: 5,
          borderWidth: 1,
          // dottedLine: true,
          arrowLine: true
        }
      ],
      markers: [
        {
          id: 0,
          longitude: 104.014998,
          latitude: 30.680657,
          // alpha:0,
          callout: {
            content: '起',
            padding: 10,
            display: 'ALWAYS',
            textAlign: 'center',
            borderRadius: 10,
            borderColor: '#ff0000',
            borderWidth: 2
          }
        },
        {
          id: 1,
          longitude: 104.037727,
          latitude: 30.660595,
          // alpha:0,
          callout: {
            content: '5公里',
            padding: 10,
            display: 'ALWAYS',
            textAlign: 'center',
            borderRadius: 10,
            borderColor: '#ff0000',
            borderWidth: 2
          }
        },
        {
          id: 2,
          longitude: 104.067564,
          latitude: 30.646977,
          // alpha:0,
          callout: {
            content: '10公里',
            padding: 10,
            display: 'ALWAYS',
            textAlign: 'center',
            borderRadius: 10,
            borderColor: '#ff0000',
            borderWidth: 2
          }
        },
        {
          id: 3,
          longitude: 104.080079,
          latitude: 30.620579,
          // alpha:0,
          callout: {
            content: '15公里',
            padding: 10,
            display: 'ALWAYS',
            textAlign: 'center',
            borderRadius: 10,
            borderColor: '#ff0000',
            borderWidth: 2
          }
        },
        {
          id: 4,
          longitude: 104.067827,
          latitude: 30.588831,
          // alpha:0,
          callout: {
            content: '20公里',
            padding: 10,
            display: 'ALWAYS',
            textAlign: 'center',
            borderRadius: 10,
            borderColor: '#ff0000',
            borderWidth: 2
          }
        },
        {
          id: 5,
          longitude: 104.069114,
          latitude: 30.543311,
          // alpha:0,
          callout: {
            content: '25公里',
            padding: 10,
            display: 'ALWAYS',
            textAlign: 'center',
            borderRadius: 10,
            borderColor: '#ff0000',
            borderWidth: 2
          }
        },
        {
          id: 6,
          longitude: 104.070472,
          latitude: 30.497469,
          // alpha:0,
          callout: {
            content: '30公里',
            padding: 10,
            display: 'ALWAYS',
            textAlign: 'center',
            borderRadius: 10,
            borderColor: '#ff0000',
            borderWidth: 2
          }
        },
        {
          id: 7,
          longitude: 104.070659,
          latitude: 30.491331,
          // alpha:0,
          callout: {
            content: '折返点',
            padding: 10,
            display: 'ALWAYS',
            textAlign: 'center',
            borderRadius: 10,
            borderColor: '#ff0000',
            borderWidth: 2
          }
        },
        {
          id: 8,
          longitude: 104.069715,
          latitude: 30.532999,
          // alpha:0,
          callout: {
            content: '35公里',
            padding: 10,
            display: 'ALWAYS',
            textAlign: 'center',
            borderRadius: 10,
            borderColor: '#ff0000',
            borderWidth: 2
          }
        },

        {
          id: 9,
          longitude: 104.064045,
          latitude: 30.564353,
          // alpha:0,
          callout: {
            content: '40公里',
            padding: 10,
            display: 'ALWAYS',
            textAlign: 'center',
            borderRadius: 10,
            borderColor: '#ff0000',
            borderWidth: 2
          }
        },
        {
          id: 10,
          longitude: 104.074506,
          latitude: 30.558316,
          title: '终',
          width: 20,
          height: 20,
          iconPath: 'http://oss.youmbe.com/assets/icons/map/start.png'
          // alpha:0,
        }
      ]
    }
  },
  computed: {
    polylines () {
      return [
        {
          points: this.pointdata,
          borderColor: '#000000',
          color: '#33c9FF',
          width: 5,
          borderWidth: 1,
          // dottedLine: true,
          arrowLine: true
        }
      ]
    }
  },
  created () {
    console.log('route/index created')
    // 实例化API核心类
    // this.qqmapsdk = new QQMapWX({
    //   key: 'N75BZ-UTB3K-7GGJW-AVMIL-MDT36-RYFTQ'
    // })
    // this.drivingRoutes()

    this.getRoutes()
  },
  methods: {
    async getRoutes () {
      let data = []
      for (let i = 0; i < this.temps.length; i++) {
        const coors = await this.drivingRoutes(i)
        console.log(coors)
        data.concat(coors)
      }
      console.log(this.pointdata)
      console.log(data)
      this.showMap = true
    },
    // formatPoint () {
    //   return new Promise(resolve => {

    //   })
    // },
    drivingRoutes (index) {
      // var locationString = latitude + ',' + longitude

      // https://apis.map.qq.com/ws/direction/v1/walking/?from=39.984042,116.307535&to=39.976249,116.316569&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
      // https:// apis.map.qq.com/ws/direction/v1/driving/?from=39.915285,116.403857&to=39.915285,116.803857&waypoints=39.111,116.112;39.112,116.113&output=json&callback=cb&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

      const p = this.temps[index]

      let data = {
        key: 'N75BZ-UTB3K-7GGJW-AVMIL-MDT36-RYFTQ',
        from: p.from,
        to: p.to
      }
      if (p.waypoints) {
        data.waypoints = p.waypoints
      }

      let type = (p.type && p.type === 'walking') ? p.type : 'driving'
      let params = {
        url: 'https://apis.map.qq.com/ws/direction/v1/' + type + '/',
        data: data
      }
      return new Promise((resolve) => {
        wx.request({
          url: params.url,
          data: params.data,
          method: 'GET',
          success: (res) => {
            // 输出一下位置信息
            console.log('第', index)
            console.log(res.data.result)
            let routes = res.data.result.routes[0]

            var coors = routes.polyline
            // for (var i = 2; i < coors.length; i++) {
            //   coors[i] = coors[i - 2] + coors[i] / 1000000
            // }
            var points = []
            for (let i = 0; i < coors.length; i++) {
              if (i > 1) {
                coors[i] = coors[i - 2] + coors[i] / 1000000
              }
              if (i % 2 === 1) {
                points.push({
                  latitude: coors[i - 1],
                  longitude: coors[i]
                })
                this.pointdata.push({
                  latitude: coors[i - 1],
                  longitude: coors[i]
                })
              }
            }
            console.log(points)
            resolve(points)

            // return coors
            // this.addressData = res.data.result
            // this.addressText = res.data.result.address
          }
        })
      })
    },
    walkingRoutes () {
      let params = {
        url: 'https://apis.map.qq.com/ws/direction/v1/walking/',
        data: {
          key: 'N75BZ-UTB3K-7GGJW-AVMIL-MDT36-RYFTQ',
          from: '30.680717,104.014907',
          to: '30.665232,104.008153'
        }
      }
      wx.request({
        url: params.url,
        data: params.data,
        method: 'GET',
        success: (res) => {
          // 输出一下位置信息
          console.log(res)
          console.log(res.data.result)
          // this.addressData = res.data.result
          // this.addressText = res.data.result.address
        }
      })
    },
    ss () {
      // 调用接口
      this.qqmapsdk.search({
        keyword: '酒店',
        success: function (res) {
          console.log(res)
        },
        fail: function (res) {
          console.log(res)
        },
        complete: function (res) {
          console.log(res)
        }
      })
    },
    selectMarket (e) {
      console.log(e)
      var id = e.markerId
      console.log(id)
      // wx.openLocation({
      //   latitude: this.data.markers[id].latitude,
      //   longitude: this.data.markers[id].longitude,
      // })
      // wx.navigateTo({
      //   url: '/pages/index/index',
      //   success: function (res) {},
      //   fail: function (res) {},
      //   complete: function (res) {}
      // })
    },
    increment () {
      this.count++
    },
    decrement () {
      this.count--
    }
  }
}
</script>

<style>
.counter-warp {
  text-align: center;
}
#mapp {
  height: 1000px;
  width: 100%;
}
.home {
  display: inline-block;
  margin: 100px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>
